<template>
  <div class="app-container">
    <div class="contentDiv">
      <div class="title">{{ $route.path === '/init/buildbook' ? '新建账套' : '编辑账套' }}</div>
      <el-form ref="dataForm" :rules="rules" inline :model="form" label-position="left" label-width="80px" style="width: 1100px; margin-left:10px;">
        <div class="subTit">基本信息</div>
        <div class="subCon">
          <el-form-item label="账套名称" prop="bookName">
            <el-input v-model="form.bookName" size="small" placeholder="账套名称" style="width:250px" @focus="focusThis($event)" />
          </el-form-item>
          <el-form-item label="科目体系" prop="coaHierarchyId">
            <el-select v-model="form.coaHierarchyId" size="small" style="width:250px" :disabled="!!userInfo.book">
              <el-option v-for="item in coaHierarchyList" :key="item.id" :label="item.coaHierarchyName" :value="item.id" />
            </el-select>
          </el-form-item>
          <el-form-item label="本位币" prop="baseCurrencyCode">
            <el-select v-model="form.baseCurrencyCode" size="small" style="width:250px" disabled>
              <el-option v-for="item in currencyList" :key="item.id" :label="item.text" :value="item.id" />
            </el-select>
          </el-form-item>
          <el-form-item label="启用期间" prop="enablePeriodYear">
            <el-select v-model="form.enablePeriodYear" size="small" style="width: 105px" :disabled="!!userInfo.book">
              <el-option v-for="item in periodList" :key="item" :value="item" :label="item" />
            </el-select>
            <span>年</span>
            <el-select v-model="form.enablePeriodNum" size="small" style="width: 105px" :disabled="!!userInfo.book">
              <el-option v-for="item in [1,2,3,4,5,6,7,8,9,10,11,12]" :key="item" :value="item" :label="item" />
            </el-select>
            <span>月</span>
          </el-form-item>
          <el-form-item label="科目级次" prop="coaLevel">
            <el-select v-model="form.coaLevel" size="small" style="width:250px">
              <el-option v-for="item in [4,5,6,7,8]" :key="item" :label="item" :value="item" />
            </el-select>
          </el-form-item>
          <el-form-item label="科目编码规则" label-width="100px" prop="codingRule">
            <span class>4 - 2 - 2 -</span>
            <select v-model="codingRuleArr[3]" class="inputItem" style="width:40px">
              <option v-for="item in [2,3,4]" :key="item" :value="item">{{ item }}</option>
            </select>
            <span v-if="form.coaLevel>4">-</span>
            <select v-if="form.coaLevel>4" v-model="codingRuleArr[4]" class="inputItem" style="width:32px">
              <option v-for="item in [2,3,4]" :key="item" :value="item">{{ item }}</option>
            </select>
            <span v-if="form.coaLevel>5">-</span>
            <select v-if="form.coaLevel>5" v-model="codingRuleArr[5]" class="inputItem" style="width:32px">
              <option v-for="item in [2,3,4]" :key="item" :value="item">{{ item }}</option>
            </select>
            <span v-if="form.coaLevel>6">-</span>
            <select v-if="form.coaLevel>6" v-model="codingRuleArr[6]" class="inputItem" style="width:32px">
              <option v-for="item in [2,3,4]" :key="item" :value="item">{{ item }}</option>
            </select>
            <span v-if="form.coaLevel>7">-</span>
            <select v-if="form.coaLevel>7" v-model="codingRuleArr[7]" class="inputItem" style="width:32px">
              <option v-for="item in [2,3,4]" :key="item" :value="item">{{ item }}</option>
            </select>
          </el-form-item>
          <el-form-item label="计税类型" prop="taxType">
            <el-select v-model="form.taxType" size="small" style="width:250px">
              <el-option label="开票计税" :value="2" />
              <el-option label="全计税" :value="1" />
              <el-option label="不计税" :value="0" />
            </el-select>
          </el-form-item>
          <el-form-item label="增值税率">
            <el-input v-model="form.defaultTaxRateStr" placeholder size="mini" style="width:238px" />%
            <!-- <span style="font-size:12px;margin-right:10px">(小规模纳税人为3%，一般纳税人为13%)</span> -->
          </el-form-item>
          <el-form-item label="单据税率编辑" label-width="100px" style="margin-right:160px">
            <el-switch v-model="form.isTaxRateEditable" :inactive-value="0" :active-value="1" />
          </el-form-item>
          <el-form-item label="科目名称显示路径" label-width="130px" style="margin-right:170px">
            <el-switch v-model="form.isDispName" :inactive-value="0" :active-value="1" />
          </el-form-item>
          <el-form-item label="凭证中显示辅助项编码组合" label-width="180px" style="margin-right:120px">
            <el-switch v-model="form.isCoaCobinationCode" :inactive-value="0" :active-value="1" />
          </el-form-item>
          <el-form-item label="录凭证时默认凭证日期" label-width="160px">
            <el-radio-group v-model="form.isVoucherMaxDate">
              <el-radio :label="0" style="margin-right:10px">当前日期</el-radio>
              <el-radio :label="1">最大凭证日期</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="存货核算设置" label-width="90px">
            <el-radio-group v-model="form.isWarehouse">
              <el-radio :label="0" style="margin-right:10px">按公司</el-radio>
              <el-radio :label="1">按仓库</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="禁止负库存时检查点" label-width="140px">
            <el-radio-group v-model="form.inventoryType">
              <el-radio :label="0" style="margin-right:10px">单据审核时</el-radio>
              <el-radio :label="1">单据保存时及审核时</el-radio>
            </el-radio-group>
          </el-form-item>
        </div>
        <div class="subTit">
          核算科目
          <span class="coaBtn pointer" @click="showDefault()">默认科目</span>
        </div>
        <div class="subCon">
          <el-form-item label="启用数量核算" label-width="95px">
            <el-switch v-model="form.isQuantity" :inactive-value="0" :active-value="1" :disabled="!!userInfo.book" />
          </el-form-item>
          <el-form-item label="启用供应商核算" label-width="110px">
            <el-switch v-model="form.isAuxSupplier" :inactive-value="0" :active-value="1" :disabled="!!userInfo.book" />
          </el-form-item>
          <el-form-item label="启用客户核算" label-width="95px">
            <el-switch v-model="form.isAuxCust" :inactive-value="0" :active-value="1" :disabled="!!userInfo.book" />
          </el-form-item>
          <el-form-item label="启用部门核算" label-width="95px">
            <el-switch v-model="form.isAuxDept" :inactive-value="0" :active-value="1" :disabled="!!userInfo.book" />
          </el-form-item>
          <el-form-item label="启用职员核算" label-width="95px">
            <el-switch v-model="form.isAuxStaff" :inactive-value="0" :active-value="1" :disabled="!!userInfo.book" />
          </el-form-item>
          <el-form-item label="启用品类核算" label-width="95px">
            <el-switch v-model="form.isAuxInv" :inactive-value="0" :active-value="1" :disabled="!!userInfo.book" />
          </el-form-item>
          <el-form-item label="启用存货核算" label-width="95px">
            <el-switch v-model="form.isAuxItem" :inactive-value="0" :active-value="1" :disabled="!!userInfo.book" />
          </el-form-item>
        </div>
        <div class="subTit">自动凭证</div>
        <div class="subCon">
          <el-form-item label="自动凭证在保存时自动审核" label-width="175px" style="margin-right:70px">
            <el-switch v-model="form.isAutoAuditWhenAutoSave" :inactive-value="0" :active-value="1" />
          </el-form-item>
          <el-form-item label="结账时自动审核凭证" label-width="136px" style="margin-right:570px">
            <el-switch v-model="form.autoAuditFlag" :inactive-value="0" :active-value="1" :disabled="form.isAutoTransfer==1" />
          </el-form-item>
          <el-form-item label="制单人" label-width="50px" prop="jeRecorderId">
            <el-select ref="staff1" v-model="form.jeRecorderId" style="width:100px" placeholder="制单人" size="small" @change="changeVal1">
              <el-option label="无" :value="null" />
              <el-option v-for="item in userlist" :key="item.id" :label="item.text" :value="item.id" />
            </el-select>
          </el-form-item>
          <el-form-item label="制单人签名" label-width="85px" prop="sign1">
            <el-input v-model="form.sign1" size="small" style="width:100px" placeholder="制单人签名" />
          </el-form-item>
          <el-form-item label="审核人" label-width="50px" prop="jeAuditorId">
            <el-select ref="staff2" v-model="form.jeAuditorId" style="width:100px" placeholder="审核人" size="small" @change="changeVal2">
              <el-option label="无" :value="null" />
              <el-option v-for="item in userlist" :key="item.id" :label="item.text" :value="item.id" />
            </el-select>
          </el-form-item>
          <el-form-item label="审核人签名" label-width="85px" prop="sign2">
            <el-input v-model="form.sign2" size="small" style="width:100px" placeholder="审核人签名" />
          </el-form-item>
          <el-form-item label="记账人" label-width="50px" prop="jePosterId">
            <el-select ref="staff3" v-model="form.jePosterId" style="width:100px" placeholder="记账人" size="small" @change="changeVal3">
              <el-option label="无" :value="null" />
              <el-option v-for="item in userlist" :key="item.id" :label="item.text" :value="item.id" />
            </el-select>
          </el-form-item>
          <el-form-item label="记账人签名" label-width="85px" prop="sign3">
            <el-input v-model="form.sign3" size="small" style="width:100px" placeholder="记账人签名" />
          </el-form-item>
        </div>
        <div class="subTit">单据生成凭证默认设置</div>
        <div class="subCon">
          <el-form-item label="采购单" prop="isPurchase" label-width="60px">
            <el-radio-group v-model="form.isPurchase">
              <el-radio :label="0" style="margin-right:10px">不生成</el-radio>
              <el-radio :label="1" style="margin-right:10px">汇总生成</el-radio>
              <el-radio :label="2">每单生成</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="采购退货单" prop="isPurchaseReturned" style="margin-left:20px">
            <el-radio-group v-model="form.isPurchaseReturned">
              <el-radio :label="0" style="margin-right:10px">不生成</el-radio>
              <el-radio :label="1" style="margin-right:10px">汇总生成</el-radio>
              <el-radio :label="2">每单生成</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="销售退货单" prop="isSalesReturned" style="margin-left:20px">
            <el-radio-group v-model="form.isSalesReturned">
              <el-radio :label="0" style="margin-right:10px">不生成</el-radio>
              <el-radio :label="1" style="margin-right:10px">汇总生成</el-radio>
              <el-radio :label="2">每单生成</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="预收单" prop="isPresale" label-width="60px">
            <el-radio-group v-model="form.isPresale">
              <el-radio :label="0" style="margin-right:10px">不生成</el-radio>
              <el-radio :label="1" style="margin-right:10px">汇总生成</el-radio>
              <el-radio :label="2">每单生成</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="预收退款单" prop="isPresaleReturned" style="margin-left:20px">
            <el-radio-group v-model="form.isPresaleReturned">
              <el-radio :label="0" style="margin-right:10px">不生成</el-radio>
              <el-radio :label="1" style="margin-right:10px">汇总生成</el-radio>
              <el-radio :label="2">每单生成</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="收款单" prop="isReceipt" style="margin-left:20px">
            <el-radio-group v-model="form.isReceipt">
              <el-radio :label="0" style="margin-right:10px">不生成</el-radio>
              <el-radio :label="1" style="margin-right:10px">汇总生成</el-radio>
              <el-radio :label="2">每单生成</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="付款单" prop="isPayment" label-width="60px">
            <el-radio-group v-model="form.isPayment">
              <el-radio :label="0" style="margin-right:10px">不生成</el-radio>
              <el-radio :label="1" style="margin-right:10px">汇总生成</el-radio>
              <el-radio :label="2">每单生成</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="盘点单" prop="isInventory" style="margin-left:20px">
            <el-radio-group v-model="form.isInventory">
              <el-radio :label="0" style="margin-right:10px">不生成</el-radio>
              <el-radio :label="1" style="margin-right:10px">汇总生成</el-radio>
              <el-radio :label="2">每单生成</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="销售(订)单" prop="isSales" style="margin-left:20px">
            <el-radio-group v-model="form.isSales">
              <el-radio :label="0" style="margin-right:10px">不生成</el-radio>
              <el-radio :label="1" style="margin-right:10px">汇总生成-开票</el-radio>
              <el-radio :label="2">汇总生成-全部</el-radio>
            </el-radio-group>
          </el-form-item>
        </div>
        <div class="subTit">结转/结账</div>
        <div class="subCon">
          <el-form-item label="期末自动结转、结账" label-width="136px" style="margin-right:70px">
            <el-switch v-model="form.isAutoTransfer" :inactive-value="0" :active-value="1" @change="autoTransferChange" />
          </el-form-item>
          <el-form-item v-if="form.isAutoTransfer==1" label="自动结转凭证" label-width="120px" style="margin-right:200px">
            <el-checkbox v-model="form.isAutoJzcb" :false-label="0" :true-label="100" disabled style="margin-right:10px">结转成本(100%)</el-checkbox>
            <el-checkbox v-model="form.isAutoJzdtfy" :false-label="0" :true-label="1" style="margin-right:10px">待摊费用</el-checkbox>
            <el-checkbox v-model="form.isAutoJzwjzzs" :false-label="0" :true-label="1" style="margin-right:10px">未缴增值税</el-checkbox>
            <el-checkbox v-model="form.isAutoJtzj" :false-label="0" :true-label="1" style="margin-right:10px">计提折旧</el-checkbox>
            <el-checkbox v-model="form.isAutoJtgz" :false-label="0" :true-label="1" style="margin-right:10px">计提工资</el-checkbox>
            <el-checkbox v-model="form.isAutoJzwfplr" :false-label="0" :true-label="1" style="margin-right:10px">未分配利润(年末结转)</el-checkbox>
          </el-form-item>
          <el-form-item v-if="form.isAutoTransfer==1" label="自动计提附加税" prop="isAutoJtfjs" label-width="120px">
            <el-radio-group v-model="form.isAutoJtfjs">
              <el-radio :label="0" style="margin-right:10px">不计提</el-radio>
              <el-radio :label="1" style="margin-right:10px">按月</el-radio>
              <el-radio v-if="userInfo.taxFilingCategoryCode === '2'" :label="3">按季</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item v-if="form.isAutoTransfer==1" label="自动结转损益(期末结转)" prop="isAutoJzsy" label-width="170px" style="margin-left:30px">
            <el-radio-group v-model="form.isAutoJzsy">
              <el-radio :label="0" style="margin-right:10px">不结转</el-radio>
              <el-radio :label="1" style="margin-right:10px">合并结转</el-radio>
              <el-radio :label="2">分开结转</el-radio>
            </el-radio-group>
          </el-form-item>
        </div>
        <div v-if="form.isAutoTransfer==1" class="subTit">自动结转税率</div>
        <div v-if="form.isAutoTransfer==1" class="subCon">
          <el-form-item label="城市建设维护税" label-width="110px">
            <el-input v-model="form.isAutoJtfjs7" style="width:85px;margin-right:5px" size="small" />%
          </el-form-item>
          <el-form-item label="教育附加">
            <el-input v-model="form.isAutoJtfjs3" style="width:85px;margin-right:5px" size="small" />%
          </el-form-item>
          <el-form-item label="地方教育附加" label-width="100px">
            <el-input v-model="form.isAutoJtfjs2" style="width:85px;margin-right:5px" size="small" />%
          </el-form-item>
          <el-form-item label="自动计提所得税" label-width="110px">
            <el-input v-model="form.isAutoJtsds" style="width:85px;margin-right:5px" size="small" />%
          </el-form-item>
        </div>
      </el-form>
      <div v-permiss="['701050']" class="tx-c" style="width: 1100px;margin-top:25px">
        <el-button @click="$store.dispatch('tagsView/delView', $route);$router.replace('/init/book')">取 消</el-button>
        <el-button type="primary" @click="saveData()">保 存</el-button>
      </div>
    </div>
    <el-dialog :close-on-click-modal="false" title="默认科目" :visible.sync="coaDisalogVisable" width="1150px">
      <el-table :data="tableData" fit highlight-current-row border style="width: 100%;" size="small">
        <el-table-column v-for="(it, i) in columns" :key="i" :label="it" :prop="'v'+i" align="center" />
      </el-table>
    </el-dialog>
  </div>
</template>
<script>
import { getmanagementInfo, registerLoadTaxfilingcategory } from '@/api/user'
import { getCurrencyList, getCoaHierarchy, saveBook } from '@/api/user'
import { getAccount, getUsers, getDefaultCoa } from '@/api/user'
export default {
  name: 'Buildbook',
  data() {
    return {
      coaDisalogVisable: false,
      managementInfo: {},
      accountInfo: {},
      userInfo: JSON.parse(sessionStorage.userInfo),
      codingRuleArr: [4, 2, 2, 2, 2, 2, 2, 2],
      userlist: [],
      periodList: [],
      tableData: [],
      columns: [],
      form: {
        id: '',
        bookName: '',
        baseCurrencyCode: 'CNY',
        enablePeriodYear: new Date().getFullYear(),
        enablePeriodNum: new Date().getMonth() + 1,
        coaHierarchyId: '2',
        defaultTaxRateStr: '',
        isAutoAuditWhenAutoSave: 1,
        coaLevel: 5,
        codingRule: '4-2-2-2-2-2-2-2',
        isAutoJtfjs: 0,
        isCoaCobinationCode: 0,
        autoVoucherType: 0,
        isVoucherMaxDate: 0,
        isDispName: 0,
        isAutoJtfjs2: 2,
        isAutoJtfjs3: 3,
        isAutoJtfjs7: 7,
        isAutoJzwjzzs: 0,
        isAutoJtgz: 0,
        autoAuditFlag: 0,
        isAutoJtsds: 25,
        isAutoJtzj: 0,
        isAutoJzcb: 100,
        isAutoJzdtfy: 0,
        isAutoJzsy: 0,
        isAutoJzwfplr: 0,
        isAutoTransfer: 1,
        isAuxCust: 0,
        isAuxDept: 0,
        isAuxItem: 0,
        isAuxInv: 0,
        isAuxStaff: 0,
        isAuxSupplier: 0,
        isQuantity: 0,
        jeRecorderId: '',
        jeAuditorId: '',
        jePosterId: '',
        sign1: '',
        sign2: '',
        sign3: '',
        taxType: 2,
        isTaxRateEditable: 0,
        isPurchase: 0,
        isPurchaseReturned: 0,
        isSales: 0,
        isSalesReturned: 0,
        isPresale: 0,
        isPresaleReturned: 0,
        isReceipt: 0,
        isPayment: 0,
        isInventory: 0,
        inventoryType: 1,
        isWarehouse: 1
      },
      rules: {
        orgName: [
          { required: true, message: '企业全称不能为空', trigger: 'change' }
        ],
        areaId: [
          { required: true, message: '请选择企业所在地', trigger: 'change' }
        ],
        industryId: [
          { required: true, message: '请选择行业类别', trigger: 'change' }
        ],
        taxFilingCategoryId: [
          { required: true, message: '请选择纳税类型', trigger: 'change' }
        ]
      },
      currencyList: [],
      coaHierarchyList: [],
      taxfillingcategoryList: []
    }
  },
  created() {
    const year = new Date().getFullYear()
    const period = []
    for (let i = year - 4; i <= year; i++) {
      period.push(i)
    }
    this.periodList = period
    registerLoadTaxfilingcategory().then((res) => {
      this.taxfillingcategoryList = res.data.data
    })
    getCurrencyList().then((res) => {
      this.currencyList = res.data.data
    })
    getCoaHierarchy().then((res) => {
      this.coaHierarchyList = res.data.data
    })
    getUsers().then((res) => {
      this.userlist = res.data.data
    })
  },
  mounted() {
    this.getData()
    getDefaultCoa().then((res) => {
      this.tableData = res.data.data.dataSet.map((item) => {
        return this.arrayToObj(item)
      })
      this.columns = res.data.data.columns
    })
  },
  methods: {
    showDefault() {
      this.coaDisalogVisable = true
    },
    arrayToObj(arr) {
      const obj = {}
      arr.forEach((item, index) => {
        obj['v' + index] = item
      })
      return obj
    },
    focusThis(e) {
      e.currentTarget.select()
    },
    changeVal1() {
      this.$nextTick(() => {
        this.form.sign1 = this.$refs.staff1.selected.label
      })
    },
    changeVal2() {
      this.$nextTick(() => {
        this.form.sign2 = this.$refs.staff2.selected.label
      })
    },
    changeVal3() {
      this.$nextTick(() => {
        this.form.sign3 = this.$refs.staff3.selected.label
      })
    },
    autoTransferChange(val) {
      if (val) {
        this.form.autoAuditFlag = 1
      }
    },
    saveData() {
      this.$refs.dataForm.validate((valid) => {
        if (valid) {
          const obj = this.form
          const ruleArr = this.codingRuleArr.slice(0, this.form.coaLevel)
          obj.codingRule = ruleArr.join('-')
          saveBook(obj).then((res) => {
            if (res.data.errorCode === '0') {
              const text = this.form.id ? '账套更新成功' : '建账成功'
              this.$alert(res.data.msg, text, {
                confirmButtonText: '确定',
                showClose: false,
                type: 'success',
                center: true
              }).then(() => {
                this.$store.dispatch('user/logout').then(() => {
                  this.$router.replace('/login')
                })
              })
            }
          })
        }
      })
    },
    getNum(num) {
      var x = String(num).indexOf('.') + 1 // 得到小数点的位置
      var y = String(num).length - x // 小数点的位数
      if (y === 0) {
        return x
      }
      if (y > 0) {
        return y
      }
    },
    formatNum(num) {
      if (!num) {
        return 0
      }
      if (this.getNum(num) === 2) {
        return Number(num * 100).toFixed(0)
      } else {
        return Number(num * 100).toFixed(2)
      }
    },
    getData() {
      getmanagementInfo().then((res) => {
        if (res.data.errorCode === '0') {
          this.managementInfo = res.data.data[0] || {}
        }
      })
      getAccount().then((res) => {
        if (res.data.errorCode === '0') {
          this.accountInfo = res.data.data[0] || {}
          if (this.accountInfo !== {}) {
            this.accountInfo.defaultTaxRateStr = this.formatNum(
              this.accountInfo.defaultTaxRate
            )
            this.accountInfo.isAutoJtfjs7 = this.formatNum(
              this.accountInfo.isAutoJtfjs7
            )
            this.accountInfo.isAutoJtfjs2 = this.formatNum(
              this.accountInfo.isAutoJtfjs2
            )
            this.accountInfo.isAutoJtfjs3 = this.formatNum(
              this.accountInfo.isAutoJtfjs3
            )
            this.accountInfo.isAutoJzcb = this.formatNum(
              this.accountInfo.isAutoJzcb
            )
            this.accountInfo.isAutoJtsds = this.formatNum(
              this.accountInfo.isAutoJtsds
            )
          }
        }
        if (this.$route.path === '/init/buildbook') {
          this.codingRuleArr = [4, 2, 2, 2, 2, 2, 2, 2]
          this.form.bookName = this.managementInfo.orgName
        } else {
          for (var key in this.form) {
            this.form[key] = this.accountInfo[key]
          }
          this.form.isAutoJzcb = 100
        }
      })
    }
  }
}
</script>
<style lang="scss" scoped>
>>> .el-form-item__label {
  padding-right: 5px;
}
.panel-group {
  .card-panel-col {
    margin-bottom: 32px;
  }
}

/deep/ .el-card__header {
  padding: 10px 15px;
}

/deep/ .el-card__body {
  padding: 10px 20px 15px;
}

/deep/ .el-input__inner {
  padding: 0 5px;
}

/deep/ .el-form-item {
  margin-bottom: 16px;
}
</style>
<style scoped>
.subTit {
  font-size: 14px;
  font-weight: bold;
  background-color: #efefef;
  height: 40px;
  line-height:40px;
  padding-left: 10px;
  padding-right: 10px;
  border-radius: 4px;
}
.coaBtn{
  float:right; color:#409EFF; font-weight: 100; font-size:12px;border: 1px #409eff solid; border-radius: 20px;
  width:80px;height: 24px;text-align: center;line-height: 22px;margin-top:8px
}
.subCon{
  padding-left: 12px;
  padding-top: 12px;
}
.title {
  margin: 15px 0 20px;
  padding-left: 15px;
  font-size: 16px;
  font-weight: bold;
}
.listItem {
  height: 42px;
  line-height: 42px;
  border-bottom: 1px #eee solid;
  font-size: 14px;
  color: #333;
}

.spanItem1 {
  width: 20px;
  line-height: 28px;
  display: inline-block;
  text-align: center;
}

.spanItem2 {
  width: 60px;
  line-height: 28px;
  display: inline-block;
  text-align: center;
}

.inputItem {
  width: 32px;
  line-height: 28px;
  text-align: center;
  border: 1px solid #dcdfe6;
  border-radius: 4px;
}

.listItem:last-child {
  border-bottom: none;
}

.listItem label {
  display: inline-block;
  vertical-align: middle;
  margin-right: 3px;
  width: 80px;
}
</style>
